<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #bdw {
            width: 400px;
            height: 500px;
            margin: auto;
        }
        p{font-size:12px;}
    </style>
</head>

<body>


    <fieldset id="bdw">
        <legend>表单</legend>
        <form action="#" id="bd">
            <!--  作业:.写一个表单字段有邮箱、QQ号、手机号、姓名(中文)有长度限制、年龄、性别、星座、点击提交触发事件实现表单验证提示 -->
            <span>姓名:</span><input type="text" id="xm"><br />
            <p id="p1q" style="color: crimson;"></p>
            <span>年龄:</span><input type="number" id="nl"><br />
            <p id="p2q" style="color: crimson;"></p>
            <span>性别:</span><input type="text" id="xb"><br />
            <p id="p3q" style="color: crimson;"></p>
            <span>手机号:</span><input type="number" id="sjh"><br />
            <p id="p4q" style="color: crimson;"></p>
            <span>邮箱:</span><input type="text" id="yx" ><br />
            <p id="p5q" style="color: crimson;"></p>
            <span>QQ号:</span><input type="text" id="qq" ><br />
            <p id="p6q" style="color: crimson;"></p>
            <span>星座:</span><input type="text" id="xz" ><br />
            <p id="p7q" style="color: crimson;"></p>
            <input type="submit" id="btn" onclick="fun()" value="提交">

        </form>
    </fieldset>
    <script>
        // 作业:写一个表单字段有邮箱、QQ号、手机号、姓名(中文)有长度限制、年龄、性别、星座、点击提交触发事件实现表单验证提示
        function fun() {
            var xing = document.getElementById("xm").value
            var ming = /^[\u4e00-\u9fa5]{2,5}$/g
            //console.log(ming.test(xing))
            if (ming.test(xing)) {
                console.log("我爱中国")
            } else {
                document.getElementById("p1q").innerHTML = "请输入中文姓名"
            }
            var nian = document.getElementById("nl").value
            var ling = /^(\d|[1-9]\d|1[0-5][0-9])$/g
         
            if (ling.test(nian)) {
                console.log("我爱北京")
            } else {
                document.getElementById("p2q").innerHTML = "请输入正确年龄(150岁以内)"
            }
            var xin = document.getElementById("xb").value
            var bie = /^[\u7537\u5973]$/g
            if (bie.test(xin)) {
                console.log("我爱光山")
            } else {
                document.getElementById("p3q").innerHTML = "请输入正确性别（男/女）"
            }
            var shou = document.getElementById("sjh").value
            var hao = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/g
            if (hao.test(shou)) {
                console.log("我爱河南")
            } else {
                document.getElementById("p4q").innerHTML = "请输入11位数字的手机号"
            }
            var you = document.getElementById("yx").value
            var xiang = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/g
            if (xiang.test(you)) {
                console.log("我爱信阳")
            } else {
                document.getElementById("p5q").innerHTML = "请输入正确的邮箱格式"
            }
            var Qq = document.getElementById("qq").value
            var ha= /^[1-9][0-9]{9}$/g
            if (ha.test(Qq)) {
                console.log("我爱罗山")
            } else {
                document.getElementById("p6q").innerHTML = "请输入正确的QQ号"
            }
            var shuang = document.getElementById("xz").value
            var zuo= /^(\u767d\u7f8a\u5ea7)|(\u91d1\u725b\u5ea7)|(\u53cc\u5b50\u5ea7)|(\u5de8\u87f9\u5ea)|(\u72ee\u5b50\u5ea7)|(\u5904\u5973\u5ea7)|(\u5929\u79e4\u5ea7)|(\u5929\u874e\u5ea7)|(\u5c04\u624b\u5ea7)|(\u6469\u7faf\u5ea7)|(\u6c34\u74f6\u5ea7)|(\u53cc\u9c7c\u5ea7)$/g  //子 \u5b50  座 \u5ea7
            if (zuo.test(shuang)) {
                console.log("我爱家乡")
            } else {
                document.getElementById("p7q").innerHTML = "请输入12星座其中之一"
            }


        }

    </script>
</body>

</html>